import axios from "axios"
import { inject, onMounted } from "vue"
import { mapStore } from "@/stores/counter"
export const PM_city = () => {
    const store = mapStore()
    let scene
    let map
    let data, geojson_PM, popup
    onMounted(async () => {
        scene = inject('$scene')
        map = inject('$map')
        // pmData()
        const res = await axios.get('/src/source/空气质量/pm2.5.csv')
        const lines = res.split('\n')
        let year = lines[0].split(',').findIndex(item => item.endsWith(store.selectedYear))
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                name: value[0],
                lng: parseFloat(value[1]),
                lat: parseFloat(value[2]),
                pm: parseFloat(value[year]),
                year: parseFloat(store.selectedYear)
            }
        })
    })

    const PMclick = async () => {
        store.isEchart=false
        store.issunItem = false
        store.istempItem=false
        store.israinyItem=false
        store.ispmItem = true
        store.isClick = true
        store.isPM = true
        store.isGDP = false
        if (scene.getLayer() != 0) {
            scene.removeAllLayer()
        }

        const res = await axios.get('/src/source/空气质量/pm2.5.csv')
        const lines = res.split('\n')
        let year = lines[0].split(',').findIndex(item => item.endsWith(store.selectedYear))
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                name: value[0],
                lng: parseFloat(value[1]),
                lat: parseFloat(value[2]),
                pm: parseFloat(value[year]),
                year: parseFloat(store.selectedYear)
            }
        })
        let optionData_High = data.sort((a, b) => b.pm - a.pm).slice(0, 5)
        let optionData_Low = data.sort((a, b) => a.pm - b.pm).slice(0, 5)

        // 画图
        // option
        store.pmItem_option = {
            dataset: {
                source: [
                    ['year', 'pm', 'name'],
                    ...optionData_High.map(item => [item.year, item.pm, item.name])
                ]
            },
            grid: {
                left: '20%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                name: 'pm', axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'category', axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        x: 'pm',
                        y: 'name'
                    },
                    itemStyle: {
                        color: '#ff2d51'
                    }
                }
            ]
        };

        store.pmItem_option_low = {
            title: {
                text: `${store.selectedYear}年PM指数最高与最低城市`,
                left: 'center',
                bottom: '2%',
                textStyle: {
                    color: '#598496',

                },
            },
            dataset: {
                source: [
                    ['score', 'pm', 'name'],
                    ...optionData_Low.map(item => [item.year, item.pm, item.name])
                ]
            },
            grid: {
                left: '20%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                name: 'pm', axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'category', axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        x: 'pm',
                        y: 'name'
                    },

                }
            ]
        };
        // 转为geojson
        geojson_PM = {
            type: 'FeatureCollection',
            features: data.map(item => ({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                },
                properties: {
                    pm: item.pm,
                    name: item.name,
                    year: item.year,
                }
            }))
        }
        const layer = new L7.PointLayer({ blend: 'additive' })
            .source(geojson_PM, {
                parser: {
                    type: 'geojson',
                    coordinates: 'coordinates',
                },
            })
            .shape('circle')
            .color('#f00')
            .size('pm', (v) => v)
            .style({
                blur: 2.5,
                opacity: {
                    field: 'opacity',
                },
            })
            .active(true);

        scene.addLayer(layer);
        layer.on('mousemove', (e) => {
            console.log(e)
            popup = new L7.Popup({
                offsets: [0, 0],
                closeButton: false,
            })
                .setLnglat(e.lngLat)
                .setHTML(`<span>${e.feature.properties.year}年${e.feature.properties.name}: ${e.feature.properties.pm}</span>`);
            scene.addPopup(popup);
        });
        layer.on('mouseout', () => {
            scene.removePopup(popup)
        })
    }

    const renderPM = () => {
        PMclick()
    }

    return {
        PMclick,
        renderPM,
    }
}

